<!--发布项目页面-->
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <form class="layui-form" action="" id="myForm">
            <!--项目编号-->
            <div class="layui-form-item">
                <label class="layui-form-label">项目编号</label>
                <div class="layui-input-inline">
                    <input type="text" name="yfbItemNumber" lay-verify="title" autocomplete="off" placeholder="请输入项目编号" class="layui-input">
                </div>
            </div>
            <!--项目名-->
            <div class="layui-form-item">
                <label class="layui-form-label">项目名</label>
                <div class="layui-input-inline">
                    <input type="text" name="yfbItemName" lay-verify="title" autocomplete="off" placeholder="请输入项目名" class="layui-input">
                </div>
            </div>
            <!--项目计划书-->
            <div class="layui-form-item" id="book" >
                <label class="layui-form-label">项目计划书</label>
                <div class="layui-input-block">  <!--使用项目计划书右侧的板块-->
                    <!--硬件计划书-->
                    <div>
                        <!--头-->
                        <div class="layui-row layui-col-space5">  <!--使用layui栅格-->
                            <h2 style="display:inline-block; margin-bottom: 0">硬件开发</h2>
                            <input lay-verify="myCheckbox" type="checkbox" class="mySwitch" value="硬件开发" lay-skin="switch" lay-filter="switch" lay-text="开启|关闭">
                        </div>
                        <hr class="layui-bg-red" style="width: 200px">
                        <!--隐藏的编辑框-->
                        <div id="hardwareHidden" style="display: none">
                            <!--需求计划书-->
                            <div class="layui-row layui-col-space5">
                                <div class="layui-col-md2 layui-col-md-offset1" >
                                    <span>需求计划书</span>
                                    <div id="demand_hardware" name="demand_hardware" style=" display: none">
                                        <!--开发分类-->
                                        <input type="hidden" name="yfbBookDevelopsort" value="硬件">
                                        <input type="hidden" name="yfbBookBooksort" value="需求计划书">
                                        <!--创建时间-->
                                        <div class="layui-row layui-col-space5">
                                            <label class="layui-form-label">创建时间</label>
                                            <div class="layui-input-inline">
                                                <input lay-verify="book1" type="text" id="date1" name="yfbBookCreatetime" autocomplete="off" placeholder="请选择日期" class="layui-input deleteHardware" lay-v>
                                            </div>
                                        </div>
                                        <hr class="layui-bg-red">
                                        <!--内容-->
                                        <div class="layui-row layui-col-space5">
                                            <div >
                                            <textarea class="deleteHardware" lay-verify="book1" placeholder="请输入内容" name="yfbBookContent"
                                                      style="width: 600px; height: 300px; border-style:hidden;"></textarea>
                                            </div>
                                        </div>
                                        <hr class="layui-bg-red">
                                        <!--版本-->
                                        <div class="layui-row layui-col-space5">
                                            <label class="layui-form-label">项目版本</label>
                                            <div class="layui-input-inline">
                                                <input lay-verify="book1" type="text" name="yfbBookVersion" autocomplete="off" placeholder="请输入需求版本" class="date deleteHardware">
                                            </div>
                                        </div>
                                    </div>
                                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm">编辑</button>
                                </div>
                            </div>
                            <!--设计计划书-->
                            <div class="layui-row layui-col-space5">
                                <div class="layui-col-md2 layui-col-md-offset1" >
                                    <span>设计计划书</span>
                                    <div id="design_hardware" name="design_hardware" style=" display: none">
                                        <!--开发分类-->
                                        <input type="hidden" name="yfbBookDevelopsort" value="硬件">
                                        <input type="hidden" name="yfbBookBooksort" value="设计计划书">
                                        <div class="layui-row layui-col-space5">
                                            <label class="layui-form-label">创建时间</label>
                                            <div class="layui-input-inline">
                                                <input lay-verify="book1" id="date2" type="text" name="yfbBookCreatetime" autocomplete="off" placeholder="请选择日期" class="layui-input deleteHardware">
                                            </div>
                                        </div>
                                        <hr class="layui-bg-red">
                                        <div class="layui-row layui-col-space5">
                                            <div >
                                            <textarea class="deleteHardware" lay-verify="book1" placeholder="请输入内容" name="yfbBookContent"
                                                      style="width: 600px; height: 300px; border-style:hidden;"></textarea>
                                            </div>
                                        </div>
                                        <hr class="layui-bg-red">
                                        <div class="layui-row layui-col-space5">
                                            <label class="layui-form-label">项目版本</label>
                                            <div class="layui-input-inline">
                                                <input lay-verify="book1" type="text" name="yfbBookVersion" autocomplete="off" placeholder="请输入需求版本" class="layui-input deleteHardware">
                                            </div>
                                        </div>
                                    </div>
                                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm">编辑</button>
                                </div>
                            </div>
                            <!--测试计划书-->
                            <div class="layui-row layui-col-space5">
                                <div class="layui-col-md2 layui-col-md-offset1" >
                                    <span>测试计划书</span>
                                    <div id="test_hardware" name="test_hardware" style=" display: none">
                                        <!--开发分类-->
                                        <input type="hidden" name="yfbBookDevelopsort" value="硬件">
                                        <input type="hidden" name="yfbBookBooksort" value="测试计划书">
                                        <div class="layui-row layui-col-space5">
                                            <label class="layui-form-label">创建时间</label>
                                            <div class="layui-input-inline">
                                                <input lay-verify="book1" type="text" id="date3"  name="yfbBookCreatetime"  autocomplete="off" placeholder="请选择日期" class="layui-input date deleteHardware">
                                            </div>
                                        </div>
                                        <hr class="layui-bg-red">
                                        <div class="layui-row layui-col-space5">
                                            <div >
                                                <textarea class="deleteHardware" lay-verify="book1" placeholder="请输入内容" name="yfbBookContent"
                                                          style="width: 600px; height: 300px; border-style:hidden;"></textarea>
                                            </div>
                                        </div>
                                        <hr class="layui-bg-red">
                                        <div class="layui-row layui-col-space5">
                                            <label class="layui-form-label">项目版本</label>
                                            <div class="layui-input-inline">
                                                <input lay-verify="book1" type="text" name="yfbBookVersion"  autocomplete="off" placeholder="请输入需求版本" class="layui-input deleteHardware">
                                            </div>
                                        </div>
                                    </div>
                                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm">编辑</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--软件计划书-->
                    <div>
                        <!--头-->
                        <div class="layui-row layui-col-space5">  <!--使用layui栅格-->
                            <h2 style="display:inline-block;">软件开发</h2>
                            <input lay-verify="myCheckbox" type="checkbox" class="mySwitch" value="软件开发" lay-skin="switch" lay-filter="switch" lay-text="开启|关闭">
                        </div>
                        <hr class="layui-bg-red" style="width: 200px">
                        <!--隐藏的编辑框-->
                        <div id="softwareHidden" style="display: none">
                            <!--需求计划书-->
                            <div class="layui-row layui-col-space5">
                                <div class="layui-col-md2 layui-col-md-offset1" >
                                    <span>需求计划书</span>
                                    <div id="demand_software" name="demand_software" style=" display: none">
                                        <!--开发分类-->
                                        <input  type="hidden" name="yfbBookDevelopsort" value="软件">
                                        <input  type="hidden" name="yfbBookBooksort" value="需求计划书">
                                        <div class="layui-row layui-col-space5">
                                            <label class="layui-form-label">创建时间</label>
                                            <div class="layui-input-inline">
                                                <input lay-verify="book2" type="text" id="date4"  name="yfbBookCreatetime"  autocomplete="off" placeholder="请选择日期" class="layui-input date deleteSoftware">
                                            </div>
                                        </div>
                                        <hr class="layui-bg-red">
                                        <div class="layui-row layui-col-space5">
                                            <div >
                                            <textarea class="deleteSoftware" lay-verify="book2" placeholder="请输入内容" name="yfbBookContent"
                                                      style="width: 600px; height: 300px; border-style:hidden;"></textarea>
                                            </div>
                                        </div>
                                        <hr class="layui-bg-red">
                                        <div class="layui-row layui-col-space5">
                                            <label class="layui-form-label">项目版本</label>
                                            <div class="layui-input-inline">
                                                <input lay-verify="book2" type="text" name="yfbBookVersion"  autocomplete="off" placeholder="请输入需求版本" class="layui-input deleteSoftware">
                                            </div>
                                        </div>
                                    </div>
                                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm">编辑</button>
                                </div>
                            </div>
                            <!--设计计划书-->
                            <div class="layui-row layui-col-space5">
                                <div class="layui-col-md2 layui-col-md-offset1" >
                                    <span>设计计划书</span>
                                    <div id="design_software" name="design_software" style=" display: none">
                                        <!--开发分类-->
                                        <input  type="hidden" name="yfbBookDevelopsort" value="软件">
                                        <input  type="hidden" name="yfbBookBooksort" value="开发计划书">
                                        <div class="layui-row layui-col-space5">
                                            <label class="layui-form-label">创建时间</label>
                                            <div class="layui-input-inline">
                                                <input lay-verify="book2" type="text" id="date5"  name="yfbBookCreatetime" autocomplete="off" placeholder="请选择日期" class="layui-input date deleteSoftware">
                                            </div>
                                        </div>
                                        <hr class="layui-bg-red">
                                        <div class="layui-row layui-col-space5">
                                            <div >
                                            <textarea class="deleteSoftware" lay-verify="book2" placeholder="请输入内容" name="yfbBookContent"
                                                      style="width: 600px; height: 300px; border-style:hidden;"></textarea>
                                            </div>
                                        </div>
                                        <hr class="layui-bg-red">
                                        <div class="layui-row layui-col-space5">
                                            <label class="layui-form-label">项目版本</label>
                                            <div class="layui-input-inline">
                                                <input lay-verify="book2" type="text" name="yfbBookVersion"  autocomplete="off" placeholder="请输入需求版本" class="layui-input deleteSoftware">
                                            </div>
                                        </div>
                                    </div>
                                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm">编辑</button>
                                </div>
                            </div>
                            <!--测试计划书-->
                            <div class="layui-row layui-col-space5">
                                <div class="layui-col-md2 layui-col-md-offset1" >
                                    <span>测试计划书</span>
                                    <div id="test_software" name="test_software" style=" display: none">
                                        <!--开发分类-->
                                        <input type="hidden" name="yfbBookDevelopsort" value="软件">
                                        <input type="hidden" name="yfbBookBooksort" value="测试计划书">
                                        <div class="layui-row layui-col-space5">
                                            <label class="layui-form-label">创建时间</label>
                                            <div class="layui-input-inline">
                                                <input lay-verify="book2" type="text" id="date6" name="yfbBookCreatetime" autocomplete="off" placeholder="请选择日期" class="layui-input date deleteSoftware">
                                            </div>
                                        </div>
                                        <hr class="layui-bg-red">
                                        <div class="layui-row layui-col-space5">
                                            <div >
                                            <textarea class="deleteSoftware" lay-verify="book2" placeholder="请输入内容" name="yfbBookContent"
                                                      style="width: 600px; height: 300px; border-style:hidden;"></textarea>
                                            </div>
                                        </div>
                                        <hr class="layui-bg-red">
                                        <div class="layui-row layui-col-space5">
                                            <label class="layui-form-label">项目版本</label>
                                            <div class="layui-input-inline">
                                                <input lay-verify="book2" type="text" name="yfbBookVersion"  autocomplete="off" placeholder="请输入需求版本" class="layui-input deleteSoftware">
                                            </div>
                                        </div>
                                    </div>
                                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"> 编辑 </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--负责人表-->
            <div class="layui-form-item" id="people">
                <label class="layui-form-label">项目负责人</label>
                <div class="layui-input-block">  <!--使用项目计划书右侧的板块-->
                    <!--添加软硬件负责人-->
                    <!--头-->
                    <div class="layui-row layui-col-space5">  <!--使用layui栅格-->
                        <h2 style="display:inline-block;">硬件负责人</h2>
                    </div>
                    <hr class="layui-bg-orange" style="width: 100px">
                    <!--表格-->
                    <div class="layui-row layui-col-space5" id="hardwarePeople" style="display: none">
                        <div class="layui-col-md10" >
                            <table class="layui-hide" id="currentTableId1" lay-filter="currentTableFilter"></table>
                        </div>
                    </div>
                    <!--软件负责人-->
                    <!--头-->
                    <div class="layui-row layui-col-space5">  <!--使用layui栅格-->
                        <h2 style="display:inline-block;">软件负责人</h2>
                    </div>
                    <hr class="layui-bg-orange" style="width: 100px">
                    <!--表格-->
                    <div class="layui-row layui-col-space5"  id="softwarePeople" style="display: none">
                        <div class="layui-col-md10" >
                            <table class="layui-hide" id="currentTableId2" lay-filter="currentTableFilter"></table>
                        </div>
                    </div>
                </div>
            </div>
            <!--立项时间-->
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">立项日期</label>
                    <div class="layui-input-inline">
                        <!--placeholder="yyyy-MM-dd" -->
                        <input type="text" id="createTime" name="yfbItemCreatetime" lay-verify="title" autocomplete="off" placeholder="请选择立项日期" class="layui-input">
                    </div>
                </div>
            </div>
            <!--启动版本-->
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">项目版本</label>
                    <div class="layui-input-inline">
                        <input type="text" name="yfbItemFirstVersion" lay-verify="title" autocomplete="off" placeholder="请输入项目启动版本" class="layui-input">
                    </div>
                </div>
            </div>
            <!--提交/重置按钮-->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    layui.use(['form', 'layedit', 'laydate', 'layer', 'table', 'treetable'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , table = layui.table
            , treetable = layui.treetable;

        // 初始化表单，要加上，不然刷新部分组件可能会不加载
        form.render();

        //日期
        laydate.render({
            elem: '#createTime'
        });
        laydate.render({
            elem: '#date1'
        });
        laydate.render({
            elem: '#date2'
        });
        laydate.render({
            elem: '#date3'
        });
        laydate.render({
            elem: '#date4'
        });
        laydate.render({
            elem: '#date5'
        });
        laydate.render({
            elem: '#date6'
        });

        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length <= 0) {  //如果没有填写信息
                    return '请填写信息';
                }
            }
            , content: function (value) {
                layedit.sync(editIndex);
            }
            , myCheckbox: function (value) {  //验证计划书开关
                if(!$(".mySwitch").eq(0).is(':checked') && !$(".mySwitch").eq(1).is(':checked')) {  //计划书未选
                    return "项目计划书未填写";
                }
            }
            , book1: function (value) {  //这是验证硬件计划书和责任人
                if($(".mySwitch").eq(0).is(':checked')) {  //如果硬件开关打开
                    if (value.length <= 0) {  //如果没有填写信息
                        return '请将三个计划书填写完整';
                    }
                } else {  //没打开将数据清零
                    $(".deleteHardware").each(function () {
                        // console.log("清理前" + $(this).val());
                        $(this).val("");
                        // console.log("清理后" + $(this).val());
                    });
                }
            }
            , book2: function (value) {  //这是验证软件计划书和责任人
                if($(".mySwitch").eq(1).is(':checked')) {  //如果硬件开关打开
                    if (value.length <= 0) {  //如果没有填写信息
                        return '请将三个计划书填写完整';
                    }
                }  else {  //没打开将数据清零
                    $(".deleteSoftware").each(function () {
                        // console.log("清理前" + $(this).val());
                        $(this).val("");
                        // console.log("清理后" + $(this).val());
                    });
                }
            }
            , people1: function (value) {  //硬件责任人
                if($(".mySwitch").eq(0).is(':checked')) {  //如果硬件开关打开
                    let flag = false;
                    $('input[class="peopleCheckbok1"]').each(function(){
                        if($(this).is(':checked')) {
                            flag = true;
                        }
                    });
                    if(!flag) {
                        return "请选择责任人";
                    }
                }
            }
            , people2: function (value) {  //软件责任人
                if($(".mySwitch").eq(1).is(':checked')) {  //如果硬件开关打开
                    let flag = false;
                    $('input[class="peopleCheckbok2"]').each(function(){
                        if($(this).is(':checked')) {
                            flag = true;
                        }
                    });
                    if(!flag) {
                        return "请选择责任人";
                    }
                }
            }
        });
        //监听提交
        form.on('submit(demo1)', function (data) {
            // layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // });
            layer.confirm('确定提交？', function (data) {
                $.get("/yfb/createItem",
                    $("#myForm").serialize(),
                    function (result) {
                        if(result.code == 0) {  //成功
                            //清空表单数据
                            $("#myForm")[0].reset();
                            //隐藏员工表格
                            $("#hardwareHidden").css("display", "none");
                            $("#hardwarePeople").css("display", "none");
                            $("#softwareHidden").css("display", "none");
                            $("#softwarePeople").css("display", "none");
                            // $("#group").empty();
                            //关闭当前弹出窗
                            layer.closeAll();
                            layer.msg("发布项目成功");
                        }
                    },"json");
            });
            return false;
        });

        //编辑按钮被点击，弹出层
        $('#book .layui-btn').on('click', function () {
            let text = $(this).prev().attr("id");
            let content = $(this).prev().prev().text();
            layer.open({
                type: 1
                , title: content  //台头
                , content: $("#"+ text +"")  //引入页面
                , area: 'auto,auto'  //宽高自适应
                , offset: 't'
                // , btn: '确认'
                , btnAlign: 'c' //按钮居中
                , shade: 0 //不显示遮罩
                // , yes: function (index, layero) {
                //     layer.confirm('确定修改？', function (data) {
                //         layer.closeAll();
                //     });
                // }
                // , btn2: function (index, layero) {
                //     console.log($(this).parent().prev().prev().find("#date1").text());
                //     console.log($(this).parent().prev().prev().find("#date1").value);
                //     layer.confirm('确定取消，将不保存数据？', function (data) {
                //         $(this).val(this.defaultValue);
                //         layer.closeAll();
                //     });
                //     return false;
                // }
                // , cancel: function(index, layero){
                //     layer.confirm('确定关闭，将不保存数据？', function (data) {
                //         $(this).val(this.defaultValue);
                //         layer.closeAll();
                //     });
                //     return false;
                // }
                // , btn2: function(index, layero) {
                //     alert(index);
                //     alert(layero.text());
                // }
            });
        });

        //表格渲染
        let text = "硬件";
        for (let i = 1; i <= 2; i++) {
            if(i == 2) {
                text = "软件";
            }
            // 渲染表格
            treetable.render({
                treeColIndex: 1,
                treeSpid: -1,
                treeIdName: 'yfbGroupId',
                treePidName: 'yfbGroupParentid',

                elem: '#currentTableId'+ i,  /*添加tableid*/
                url: '/yfb/groupByClass?yfbRespClass=' + text,  /*请求地址，可以放json，可以放请求地址*/
                page: false,  /*不分页*/
                cols: [[  /*数据*/
                    // {type: 'checkbox'},
                    {title: '选择', align: "center", templet: function (d) {
                            if(d.yfbGroupPosition == "") {  //如果职位不为空
                                let text = '<input lay-verify="people' + i + '" type="checkbox" class="peopleCheckbok' + i + '" name="yfbGroupName" lay-skin="primary" lay-filter="checkbox"> ';
                                return text;
                            } else {
                                return "";
                            }
                        }},
                    // {type: 'checkbox'},
                    {field: 'yfbGroupName', title: '组名'},
                    {field: 'yfbGroupPeoplename', title: '姓名'},
                    {field: 'yfbGroupPosition', title: '职位'}
                ]],
                done: function () {
                    layer.closeAll('loading');
                }
            });
        }

        //监听复选框(表格中的复选框，复选框是form元素，所以还是form监听)
        form.on('checkbox(checkbox)', function (obj) {
            if(obj.elem.checked) {  //被选中
                //获取组名
                let value = $(this).parent().parent().next().attr("data-content");
                //赋值
                $(this).val(value);
            } else {
                $(this).val("");
            }
        });

        //监听开关
        form.on('switch(switch)', function(data){
            if(data.elem.checked) {  //开关开启
                if(data.value == "硬件开发") {
                    $("#hardwareHidden").css("display", "block");
                    $("#hardwarePeople").css("display", "block");
                    table.render();
                } else if(data.value == "软件开发") {
                    $("#softwareHidden").css("display", "block");
                    $("#softwarePeople").css("display", "block");
                }
            } else {  //关闭
                if(data.value == "硬件开发") {
                    $("#hardwareHidden").css("display", "none");
                    $("#hardwarePeople").css("display", "none");
                } else if(data.value == "软件开发") {
                    $("#softwareHidden").css("display", "none");
                    $("#softwarePeople").css("display", "none");
                }
            }
        });

    });

</script>
